<template>
	<view id="dynamicList">
		<view class="home_pageList" v-for="(item, index) in list" :key="index">
			<view class="home_pageList_top">
				<view class="home_pageList_top_img" @click.stop="gotoPersonalData(item.uuid.id)" >
					<u-avatar :src="item.uuid.headimg"></u-avatar>
					<view class="User_sex">
						<view class=" custom-icon custom-icon-nv" v-if="item.uuid.base_sex==2" />
						<view class=" custom-icon custom-icon-nan" v-else />
					</view>
				</view>
				<view class="home_pageList_top_name" @click.stop="gotoPersonalData(item.uuid.id)">
					<view class="name">
						<view  >{{item.uuid.nickname}} <text class="viewage" v-if="item.uuid.base_birthday">{{item.uuid.base_birthday}}岁</text></view>
					</view>
					<view class="activeTime" >
						<time-dispose :dateTime="item.create_at"></time-dispose>
					</view>
				</view>
			</view>
			<view class="home_pageList_content">
				<view class="content" @click.stop="gotoOpusDetail(item.id)">
					<view class="title">{{item.title}}</view>
					<!-- <view class="text">{{item.content}}</view> -->
				</view>
		<view class="opusDetail_center" >
				
				<view v-if="item.is_look == 1 && item.uuid.id != userInfo.id" class="overlay">
				    <view class="lock-content" @click="gotoOpusDetail(item.id)">
				        <u-icon name="lock" color="#ff6600" size="40"></u-icon>
				        <view class="unlock-text">点击付费解锁</view>
				    </view>
				</view>
				
				
				
				<view class="resourceType" style="position: relative;">
					
					<view class="videoType" v-if="item.video!='undefined' && item.video != '' " object-fit="cover">
						<video id="myVideo" :src="item.video" loop="true" object-fit="cover"></video>
					</view>
					<view class="imageType" v-if="item.slider!=''">
						<view class="imgList" :style="item.slider.length === 1 ? 'width: 100%' : (item.slider.length === 2 ? 'width: 43%' : 'width: 30%')" v-if="item.slider" @click.stop="previewImage(index,indexImg)"
							v-for="(itemImg,indexImg) in item.slider">
							<view class="imageListType" v-if="indexImg<=5">
								<image :src="itemImg" mode="widthFix"></image>
								<view class="ImgCount" v-if="indexImg === 5">
									<img-overrun :list="item.slider" :index="index"></img-overrun>
								</view>
								<!-- <view v-if="indexImg==5" class="ImgCount">+{{ remainingCount }}</view> -->
							</view>
						</view>
					</view>
					<view v-if="item.voice!=''">
						<!-- <audio
						      id="myAudio"
						      src="音频资源的URL"
						      controls
						      loop
						      autoplay
						      initialTime="0"
						    ></audio> -->
					</view>
				</view>
				
			</view>
			<view class="asd">
				<view>
					<!-- <u-icon name="more-dot-fill"></u-icon> -->
				</view>
				<!-- <view @click.stop="toggleShow">
					<u-icon name="more-dot-fill"></u-icon>
				</view> -->
				<view class="functionalStyle">
					<view @click.stop="toggleLove(item)" class="icontype">
						<view v-if="item.is_like == 2" class="custom-icon custom-icon-dianzan">
							{{ item.num_like }}
						</view>
						<view v-else-if="item.is_like == 1" class="custom-icon custom-icon-dianzan1">
							{{ item.num_like }}
						</view>
					</view>
					<view @click.stop="gotoOpusDetail(item.id)">
						<u-icon name="chat" size="20"></u-icon>
					</view>
					<view @click.stop="toggleCollect(item)">
						<u-icon name="star-fill" color="#f3f301" v-if="item.is_collection==1"></u-icon>
						<u-icon name="star"  v-else-if="item.is_collection==2"></u-icon>
					</view>
					<view @click.stop="" class="fenxiang">
						<u-icon name="share-square"></u-icon>
						<!-- <button open-type="share"></button> -->
					</view>
				</view>
			</view>
			</view>
		</view>
		<!-- 消息提示 -->
		<u-notify ref="uNotify" top="40" type="error" duration="1000 * 3" fontSize="20"
			:safeAreaInsetTop="true"></u-notify>
		<!-- 弹出层 -->
		<u-popup :show="show" mode="bottom" @close="close" @open="open" border-radius="14" height="300rpx">
			<view class="ejectText a">首页不显示该创作者的动态</view>
			<view class="ejectText">举报这条动态</view>
		</u-popup>
	</view>
</template>
<!-- 
	list:必填		数据
 -->
<script>
	import imgOverrun from '../imgOverrunHandleIs/img-overrun.vue';
	import timeDispose from '../timeDispose/timeDispose.vue';
	export default {
		components: {
			imgOverrun,
			timeDispose
		},
		
		props: {
			list: {
				type: Array,
				required: true,
				default: () => [], // 设置默认值为空数组
			},
		},
		data() {
			return {
				currentImage: '',
				show: false, // 初始化 show 属性
				showImg: false, // 图片弹出层的开关
				rotation: 0, // 图片旋转的角度
				messageShow: '', //消息提示
				message: '' //消息提示内容
			};
		},
		methods: {
			 
			onShareAppMessage(res) {
				console.log("分享")
			},
			// 跳转详情页
			gotoOpusDetail(id) {
				uni.navigateTo({
					url: '/pages/home/opusDetail/opusDetail?id=' + id
				})
			},





			formatTime(dateString) {
				// 将字符串转换为时间戳
				const date = new Date(dateString);

				// 检查日期是否有效
				if (isNaN(date.getTime())) {
					// console.warn('无效的日期字符串:', dateString);
					return '无效日期'; // 返回一个默认值
				}

				const timestamp = date.getTime();
				const now = Date.now();
				const diffInHours = Math.floor((now - timestamp) / 3600000);

				if (diffInHours < 24) {
					return `${diffInHours}小时前`;
				} else {
					// 格式化日期为 "YYYY-MM-DD"
					const formattedDate = date.toISOString().split('T')[0]; // 提取日期部分
					return formattedDate; // 显示日期
				}
			},







			// 切换点赞状态
			toggleLove(item) {
				item.is_like = item.is_like === 2 ? 1 : 2;
				// 更新喜欢数量
				item.num_like += item.is_like === 2 ? -1 : 1;
				this.$api.getDynamicPraise({
					dynamic_id: item.id
				}).then(res => {
					if (res.code == 1) {
						uni.$emit('genXDynamic',this.list)
						this.$refs.uNotify.show({
							message: res.info,
							bgColor: '#5ac725'
						})
					}
				})
				this.$emit('update:initialValue', this.list)
				
			},
			// 切换收藏
			toggleCollect(item) {
				item.is_collection = item.is_collection === 2 ? 1 : 2;
				// 更新喜欢数量
				item.num_collection += item.is_collection === 2 ? -1 : 1;
				this.$api.getDynamicCollection({
					dynamic_id: item.id
				}).then(res => {
					if (res.code == 1) {
						uni.$emit('genXDynamic',this.list)
						this.$refs.uNotify.show({
							message: res.info,
							bgColor: '#5ac725'
						})
					}
				})
				this.$emit('update:initialValue', this.list)
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				this.showImg = false
				this.currentImage = ''; // 关闭时重置当前图片
				// console.log('close');
			},
			gotoPersonalData(id) {
				uni.navigateTo({
					url: "/pages/home/PersonalData/PersonalData?id="+id,
				});
			},
			toggleShow() {
				this.show = !this.show; // 切换 show 的值
			},
			// 预览图片
			previewImage(index, indexImg) {
				let photoList = this.list[index].slider.map(item => {
					return item;
				});
				uni.previewImage({
					current: indexImg,
					urls: photoList
				});
			}
		}
	}
</script>


<style lang="scss" scoped>
	.ejectText {
		width: 95%;
		line-height: 100rpx;
		margin: auto;
	}
	
	

	/* .fenxiang {
		::v-deep uni-button {
			background: none !important;
			padding-left: 0 !important;
		
		}
		
		::v-deep uni-button:after {
			border: none !important;
		}
	} */


	#dynamicList {
		width: 100%;
	}

	.home_pageList {
		width: 90%;
		margin: auto;
		margin-bottom: 40px;
		padding: 20px 0;
		background: #fff;
		border-radius: 20px;

		.home_pageList_top {
			width: 90%;
			margin: auto;
			display: flex;
			align-items: center;

			.home_pageList_top_img {
				width: 20%;

				.User_sex {
					width: 34rpx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					top: -10px;
					left: 28px;

					.custom-icon {
						font-size: 24rpx;
						border-radius: 120rpx;
					}

					.custom-icon-nv {
						background: #ff4b92;
					}

					.custom-icon-nan {
						background: #0074e8;
					}

					.question {
						background: #27eaff;
						border-radius: 120rpx;
					}
				}
			}

			.home_pageList_top_name {
				width: 80%;
				.name {
					
					display: flex;
					justify-content: space-between;

					view {
						display: flex;
						align-items: center;
						
						.viewage {
							text-indent: 1rem;
							display: block;
							// width: 100rpx;
							// text-align: center;
							color: #bababa;
							font-size: 24rpx;
						}
					}
				}

				.activeTime {
					line-height: 2;
					font-size: 24rpx;
					color: #bababa;
					
				}
			}
		}


.opusDetail_center {
		width: 100%;
		margin: auto;
		position: relative; /* 确保 overlay 相对于这个元素定位 */
.overlay {
     position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(247, 247, 247, 0.5); /* 半透明背景 */
        backdrop-filter: blur(5px); /* 背景模糊效果 */
        z-index: 600; /* 确保在其他内容上面 */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        filter: mosaic(5px); /* 马赛克效果 */
   }
   .lock-content {
       display: flex;
       flex-direction: column;
       align-items: center;
       color: #ff6600; /* 文本颜色 */
   	
   }
}


		.home_pageList_content {
			width: 100%;

			.content {
					margin:0 20rpx;
				.title {
					line-height: 3;
					font-weight: bold;
				}

				.text {
					line-height: 1.5;
				}
			}

			.resourceType {
				width: 100%;
				/* display: flex;
				flex-wrap: wrap;
				justify-content: space-between; */


				.videoType {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;

					.videos {
						width: 100%;
						height: 450rpx;
						border-radius: 16rpx;
					}

					::v-deep video {
						width: 100% !important;
					 
						height: 450rpx !important;
					}
				}

				.imageType {
					width: 100%;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: flex-start;

					.imgList {
						width: 30%;
						margin: 10rpx;

						.imageListType {
							width: 100%;
							position: relative;

							image {
								width: 100%;
								border-radius: 20rpx;
							}

							.ImgCount {
								position: absolute;
								width: 204rpx;
								height: 204rpx;
								margin: 0;
								top: 0;
								left: 0;
								right: 0;
								background: #313030;
								opacity: 0.7;
								display: flex;
								align-items: center;
								justify-content: center;
								color: #fff;
								border-radius: 15rpx;
							}
						}

					}
					.controls {
						display: flex;

						button {
							height: 60rpx;
							line-height: 60rpx;
							font-size: 24rpx;
							border: 1px red solid;
							background: red;
							color: #fff;
						}
					}
				}

			}
		}

		.asd {
			width: 90%;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.functionalStyle {
				display: flex;

				// justify-content: space-between;
				view {
					width: 95rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 20rpx 0;
				}

				.icontype {
					.custom-icon-dianzan1 {
						color: red;
					}
				}
			}
		}


	}
</style>